<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>帅哥的购物车</title>
  <style>
    * {
  margin: 0;
  padding: 0;
}
ul,
ol,
li {
  list-style: none;
}
.header,
.footer {
  width: 1200px;
  height: 100px;
  background-color: #FFF;
  color: rgb(0, 0, 0);
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.content {
  width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
.content > .top,
.content > .bottom {
  height: 50px;
  background-color: #FFF;
  display: flex;
  align-items: center;
}
.content > .bottom {
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 10px;
}
.content > .bottom > .totalPrice > span {
  font-size: 20px;
  color: red;
}
.content > .bottom > .btns > button {
  font-size: 18px;
  padding: 5px 10px;
  cursor: pointer;
}
.content > .top > input {
  width: 30px;
  height: 30px;
  margin: 0 15px 0 50px;
}
.content > ul {
  padding-top: 10px;
}
.content > ul > li {
  width: 100%;
  border: 1px solid #333;
  box-sizing: border-box;
  height: 100px;
  margin-bottom: 10px;
  display: flex;
}
.content > ul > li > div {
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #333;
}
.content > ul > li > div:last-child {
  border: none;
}
.content > ul > li > .show,
.content > ul > li > .status {
  width: 100px;
}
.content > ul > li > .status > input {
  width: 30px;
  height: 30px;
}
.content > ul > li > .price,
.content > ul > li > .sub {
  width: 200px;
  color: red;
  font-size: 20px;
}
.content > ul > li > .title {
  width: 300px;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 5px;
}
.content > ul > li > .number {
  width: 230px;
}
.content > ul > li > .number > input {
  width: 50px;
  height: 30px;
  text-align: center;
  margin: 0 5px;
  border: none;
  outline: none;
  font-size: 18px;
}
.content > ul > li > .number > button {
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.content > ul > li > .destory {
  flex: 1;
}
.content > ul > li > .destory > button {
  padding: 5px;
  font-size: 18px;
  cursor: pointer;
}
 
  </style>
</head>
<body>
  <div class="header">帅哥的购物车</div>
  <div class="content"></div>
</body>
 
<script>
    let cartList = JSON.parse(localStorage.getItem('list')) || [
  {
    id: 111234, 
    status: true, 
    name: 'iPhone99',
    price: 120000,
    number: 1, 
    total: 20
  },
  {
    id: 123456,
    status: true,
    name: '小米60',
    price: 47800,
    number: 1,
    total: 20
  },
  {
    id: 965874,
    status: true,
    name: 'OPPO20000',
    price: 30000,
    number: 1,
    total: 20
  }
]
 
var content = document.querySelector('.content')
renderHTML()
function renderHTML() {
  let totalSelnum = 0
  let totalSum = 0
  let totalPrice = 0
 
  cartList.forEach(item => {
    if (item.status) {
      totalSelnum++
      totalSum += item.number
      totalPrice += item.number * item.price
    }
  })
  let str = ``
  str += `<div class="top">
                <input class="toggleAll" type="checkbox" ${(checked =
                  totalSelnum === cartList.length
                    ? 'checked'
                    : '')}/> 全选</div>
                <ul>`
  cartList.forEach(item => {
    str += ` <li>
            <div class="status">
              <input type="checkbox" ${(checked =
                item.status === true
                  ? 'checked'
                  : '')} class="checkbox" data-id = "${item.id}"/>
            </div>
            <div class="title">${item.name}</div>
            <div class="price">单价￥ ${item.price}</div>
            <div class="number">
              <button class = "sub" data-id = "${item.id}">-</button>
              <input type="text" value="${item.number}" />
              <button class = "add" data-id = "${item.id}">+</button>
            </div>
            <div class="sub">总价￥ ${(item.price * item.number).toFixed(
              2
            )}</div>
            <div class="destory">
              <button class="del" data-id = "${item.id}">删除</button>
            </div>
          </li>`
  })
  str += `</ul>    
        <div class="bottom">
          <div class="totalSelnum">总件数 : ${totalSum}</div>
          <div class="btns">
            <button class='clear'>清空购物车</button>
            <button class="buy" ${
              !totalSelnum ? 'disabled' : ''
            } data-price = "${totalPrice}">去结算</button>
            <button class="removeComplete" ${
              !totalSelnum ? 'disabled' : ''
            }>删除所有已选中</button>
          </div>
          <div class="totalPrice">总价格 : ￥ <span>${totalPrice.toFixed(
            2
          )}</span></div>
        </div>`
  content.innerHTML = str
  localStorage.setItem('list', JSON.stringify(cartList))
}
content.onclick = function (e) {
  if (e.target.className === 'toggleAll') {
    cartList.forEach(item => {
      item.status = e.target.checked
    })
    renderHTML()
  }
  if (e.target.className === 'clear') {
    if (confirm('请确定要清空购物车吗？')) {
      cartList = []
      renderHTML()
    }
  }
  if (e.target.className === 'buy') {
    console.log(e.target.dataset.price)
  }
  if (e.target.className === 'removeComplete') {
    cartList = cartList.filter(item => {
      return !item.status
    })
    renderHTML()
  }
  if (e.target.className === 'add') {
    let add = cartList.find(item => {
      return item.id == e.target.dataset.id
    })
    if (add.number < add.total) {
      add.number++
    }
    renderHTML()
  }
  if (e.target.className === 'sub') {
    let sub = cartList.find(item => {
      return item.id == e.target.dataset.id
    })
    if (sub.number > 0) {
      sub.number--
    }
    renderHTML()
  }
  if (e.target.className === 'checkbox') {
    let info = cartList.find(item => {
      return item.id == e.target.dataset.id
    })
    info.status = !info.status
    renderHTML()
  }
  if (e.target.className === 'del') {
    if (confirm('你确定要删除这一项吗？')) {
      cartList = cartList.filter(item => {
        return item.id != e.target.dataset.id
      })
      renderHTML()
    }
  }
}
</script>
</html>